<template>
  <div :style="{'background-color':background}">
    <el-row type="flex">
      <el-col :span="4" class="hidden-xs-only">
        <b class="mr-auto ml-25" index style="line-height: 50px;">KK</b>
      </el-col>
      <el-col :span="10" class="hidden-xs-only">
        <el-menu
          :default-active="activeIndex"
          class="d-flex"
          :style="{'background-color':background,'display':display}"
          style="color: white;"
          id="menu"
          mode="horizontal"
          router
          type="flex"
        >
          <el-menu-item index="/home"><i class="el-icon-s-home"></i>{{$t("header.home")}}</el-menu-item>
          <el-menu-item index="/topics"><i class="el-icon-collection-tag"></i>{{$t("header.topic")}}</el-menu-item>
          <el-menu-item index="/archive"><i class="el-icon-collection"></i>{{$t("header.archive")}}</el-menu-item>
          <el-menu-item index="/about"><i class="el-icon-thumb"></i>{{$t("header.about")}}</el-menu-item>
          <!-- <el-menu-item index="/admin/topic/all">管理</!--> -->
        </el-menu>
      </el-col>
      <el-col :span="10" :xs="{span:10 }" class="hidden-sm-and-up">
        <el-dropdown>
          <span class="el-dropdown-link" style="line-height: 50px;color:black;padding-left:20px">
            <i class="el-icon-menu"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item  index="/home">
              <router-link to="/home">{{$t("header.home")}}</router-link>
            </el-dropdown-item>
            <el-dropdown-item index="/topics">
             <router-link to="/topics">{{$t("header.topic")}}</router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/archive">{{$t("header.archive")}}</router-link>
              </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="10" style="line-height: 50px;color:black;text-align: center"  class="hidden-sm-and-up">Teemor </el-col>
      <el-col :span="10"> </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/home",
      background: "white",
      display: "block"
    };
  },
  methods: {
    // watchScroll() {
    //   let path = this.$route.path;
    //   if (path != "/" && path != "/home") {
    //     return;
    //   }
    //   var scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   //  当滚动超过 50 时，实现吸顶效果
    //   if (scrollTop > 1) {
    //     this.background = "white";
    //     this.display = "none";
    //   } else {
    //     this.background = "white";// "rgba(61, 65, 72, " + scrollTop / 100 + ")";
    //     this.display = "block";
    //   }
    // },
    // clickHandler(index, indexPath) {
    //   if (index != "/home") {
    //     this.background = "white";
    //     window.removeEventListener("scroll");
    //   } else {
    //     this.background = "white";
    //     window.addEventListener("scroll", this.watchScroll, true);
    //   }
    // }
  },
  mounted() {
    let path = this.$route.path;
    // if (path != "/" && path != "/home") {
    //   this.background = "white";
    // } else {
    //   window.addEventListener("scroll", this.watchScroll, true);
    // }
    if (path == "/") path = "/home";
    this.activeIndex = path;
  }
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: white;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>